<template>
    <div id="particles">
        <el-form class="searchForm" :model="searchForm" status-icon label-width="0" >
            <h2 class="nav_title text-center">魂淡导航</h2>
            <el-form-item prop="keyword" class="searchBar" size="large">
                <el-input placeholder="" v-model="keyword" class="input-with-select" autofocus="autofocus">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 90px;">
                        <el-option
                            v-for="item in seSites"
                            :key="item.no"
                            :label="item.name"
                            :value="item.url">
                        </el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="search()" size="large"></el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="nav_group">
            <el-row class="nav_row text-center" v-for="site in websites" :gutter="10">
                <el-col :xs="5" :sm="4" :md="3" :lg="3" :xl="3">
                    <h4 class="nav_group_title">{{site.name}}：</h4>
                </el-col>
                <el-col :xs="19" :sm="20" :md="20" :lg="20" :xl="20">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="4" :xl="3" v-for="x in site.items">
                            <a class="btn nav_btn" target="_blank" v-bind:href="x.url">
                                <span class="iconfont" :class="x.imglink"></span>
                                <span class="site_name">{{x.name}}</span>
                            </a>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>
        </div>
        <!--<div>
            <p class="foot_p">©2014 魂淡</p>
        </div>-->
    </div>
</template>
<script>
import particles from 'particles.js'
export default {
    data() {
        return {
            keyword:'',
            select:'https://www.baidu.com/s?wd=',//默认
            websites:'',
            seSites:'',
            searchForm: {},
        };
    },
    methods: {
        search() {
            let _this=this;
            if(!_this.keyword) return;
            let searchEngine=_this.select;
            window.open(searchEngine+_this.keyword,"_blank");
        },
        getWebsite(){
            this.$http.get('/static/websites.json').then((res) => {
                //console.log(JSON.parse(res.request.response));
                let _this=this;
                _this.websites=res.data;
            }, (error) => {
                //none
            });
        },
        getSEsite(){
            this.$http.get('/static/SE_sites.json').then((res) => {
                let _this=this;
                _this.seSites=res.data;
            }, (error) => {
                //none
            });
        }
    },
    mounted(){
        this.getWebsite();
        this.getSEsite();
        particlesJS.load('particles','/static/particles.json');//粒子
    }
}
</script>
<style lang="less" >
    @base_blue:#158aff;
    #particles{
        position: absolute;
        width: 100%;
        height: 100%;
        background:url('../../assets/common/img/login_bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        overflow-y: hidden;
    }
    .foot_p{
        text-align:center;
        width:100%;
        position:absolute;
        bottom:10px;
        padding:0;
        font-size: 14px;
        color:#ccc;
    }
    .el-select-dropdown{
        background: rgba(0,0,0,0.7);
        box-shadow: 0 0 6px @base_blue;
        border: 1px solid @base_blue;
        color: #fff;
        .popper__arrow{
            left:100%!important;
            border-bottom-color: @base_blue!important;
            &::after{
                border-color: @base_blue!important;
            }
        }
        .el-select-dropdown__item{
            color: #fff;
            &:hover,
            &.hover{
                background-color:transparent;
                color:@base_blue ;
            }
            &.selected{
                //background-color:transparent;
                background:rgba(21,138,255,.7);
                color:#fff ;
            }
        }
    }
    .searchForm{
        position: absolute;
        top: 90px;
        width:40%;
        margin: 0 auto;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);;
        max-width: 500px;
        .el-input{
            width: 100%;
            border-radius: 0;
            .el-input__inner{
                height: 38px;
                border-radius: 0;
                outline: 0;
                background: rgba(0,0,0,0.5);
                border:1px solid @base_blue;
                color: #fff;
                border-right: 0;
                //border:1px solid @base_blue;
                &:focus {
                    border-color: @base_blue;
                    outline: 0;
                }
            }
        }
        .el-input-group__prepend,
        .el-input-group__append{
            background: rgba(0,0,0,0.5);
            border-radius: 0;
            border:1px solid @base_blue;
            border-right: 0;
            color:@base_blue
        }
        .nav_title{
            color: #fff;
            margin-bottom: 15px;
        }
        .searchBar{
            margin-bottom:15px;
            .el-form-item__content{
                font-size: 0;
                white-space: nowrap;
            }
        }
    }
    .nav_group{
        position: absolute;
        top: 160px;
        width:100%;
        padding:0 30px;
        .nav_row{
            //border: 1px solid #f03;
            margin-bottom: 15px;
        }
        .nav_group_title{
            text-align: right;
            font-size: 20px;
            color: @base_blue;
        }

        .nav_btn {
            position: relative;
            width: 130px;
            height: 44px;
            padding: 10px 2px;
            background: rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 6px @base_blue;
            border-color: @base_blue;
            border-radius: 25px;
            font-size: 16px;
            color: @base_blue;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 15px;
            &:hover{
                background:rgba(21,138,255,.7);
                //background:#5770ff;
                .iconfont{
                    color: #fff;
                }
                .site_name{
                    color: #fff;
                }
            }

            .iconfont{
                position: absolute;
                top:5px;
                left:9px;
                display: inline-block;
                font-size: 26px;
                margin-right: 5px;
                //color: royalblue;
                color: #fff;
            }
            .site_name{
                //color: #42b983;
                margin-left: 15px;
                margin-top: 10px;
            }
        }
    }

</style>


